<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        padding: 100px 0 0 100px;
      }

      div {
        width: 400px;
        height: 400px;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <input type="button" value="我是按钮" id="click" />
    </div>
    <script>
      //useCapture
      //布尔值,指定事件是否在捕获或冒泡阶段执行
      //true  捕获阶段触发事件
      //false  冒泡阶段触发

      // 先捕获在冒泡

      var div = document.getElementById('box');
      var btn = document.getElementById('click');

      console.log(1);

      document.addEventListener(
        'click',
        function () {
          console.log('document');
        }
      ); //冒泡

      document.documentElement.addEventListener(
        'click',
        function () {
          console.log('html');
        },
        true
      ); //捕获

      document.body.addEventListener(
        'click',
        function () {
          console.log('body');
        }
      ); //冒泡

      div.addEventListener(
        'click',
        function () {
          console.log('div');
          //event.stopPropagation(); 阻止冒泡和捕获
        },
        true
      ); //捕获

      btn.addEventListener(
        'click',
        function (event) {
          console.log('button');
        }
      ); //冒泡

      console.log(2);

      //不写true 默认false 
      // 1 2 button div body html document

      // 如果想要body先响应到在 button div html document
      // 在捕获阶段先捕获body在冒泡 即body:true

      // html div button body document
      // 将html：true div:true


      /*
        触发一个事件后，在 HTML 元素间进行传播过程
        第一阶段：事件的捕获，事件对象沿 DOM 树向下传播
        第二阶段：目标触发，执行事件监听函数
        第三阶段：事件冒泡，事件沿 DOM 树向上传播
      */
      </script>
  </body>
</html>
